<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import TopBar from '@/components/Topbar/index.vue';
import { getLabelById,getFieldValue } from '@/utils/common.js'
import { getProjectDetail } from '@/api/ShopDatabase/project.js'
import { useDistInfoStore } from '@/stores/dict.js';
import { getBaseSetting,getAllCommodityExtraAttributes } from '@/api/ShopDatabase/goodsSetting.js'
const distInfoStore = useDistInfoStore();
const backValue = ref('ProjectManagementIndex');
const tabName = ref("项目详情");
const moduleType = ref("基础信息");
const route = useRoute();
const router = useRouter();
const form = ref({
    needValue:"1",
    code:"",
    projectName:"",
    mnemonicCode:"",
    serviceTime:"",
    businessBrandId:[],

    activityImg:[],
    salesState:1,
    salesClass:[],
    retailPrice:"",
    costPrice:"",
    diagnosticStep:"",
    minSellingPrice:'' //最低售价
})
const shopForm = ref({
    mallInfoPut:1,
    mallInfoValidity:"",
    mallInfoDetails:"",
    projectPictureList:[],
    purchaseNotes:""
})
const checkData = ref([]);
const attrData = ref([]);
const checkDataMaterials= ref([]);
const materialsList = ref([]);
const projectAttributesList = ref([]);
const getBrandName = (value)=>{
    let brandName = distInfoStore.getDistInfo("经营品牌").filter(lis=>{
        return value.includes(lis.id);
    }).map(lis=>{
        return lis.permissionName
    })
    return brandName.join(',');
}
const pageLoading = ref(false);
const uuid = ref(route.query.id || "");
const classifyList = ref([]);
const _getBaseSetting = async ()=>{
    try{
        let result = await getBaseSetting();
        classifyList.value =  getFieldValue('销售分类',result,'id');
        _getProjectDetail();
    }finally{

    }
}
_getBaseSetting()
const _getAllCommodityExtraAttributes = async ()=>{
    projectAttributesList.value = [];
    try{
        let result = await getAllCommodityExtraAttributes();
        if(result.projectAttributesList && result.projectAttributesList.length>0){
            projectAttributesList.value = result.projectAttributesList.filter(value=>value.disabled == 0).map(lis=>{
                if(lis.fieldType == 3 || lis.fieldType == 4){
                    lis.optionContent = lis.optionContent.split(",")
                }
                if(lis.fieldType == 4){
                    return {...lis,fieldValue:[]};
                }else{
                    return {...lis,fieldValue:""};
                }

            })
            console.log(projectAttributesList.value,222);
        }

    }catch(e){
        console.log(e);
    }
}
const _getProjectDetail = async ()=>{

    pageLoading.value = true;
    try{
        await _getAllCommodityExtraAttributes();
        let result = await getProjectDetail({id:uuid.value});
        form.value = {
            needValue:"1",
            code:result.code,
            projectName:result.projectName,
            mnemonicCode:result.mnemonicCode,
            serviceTime:result.serviceTime,
            businessBrandId:result.businessBrandId?result.businessBrandId.split(","):[],
            activityImg:result.projectPictureList?result.projectPictureList.map(value=>{
                return value.url
            }):[],
            salesState:result.salesState,
            salesClass:getLabelById(result.salesClassIdList,classifyList.value),
            retailPrice:result.retailPrice,
            costPrice:result.costPrice,
            minSellingPrice:result.minSellingPrice,//最低售价
            diagnosticStep:result.diagnosticStep,
        }
        shopForm.value = {
            mallInfoPut:result.mallInfoPut,
            mallInfoValidity:result.mallInfoValidity,
            mallInfoDetails:result.mallInfoDetails,
            projectPictureList:result.mallPictureList?result.mallPictureList.map(value=>{
                return value.url
            }):[],
            purchaseNotes:result.purchaseNotes
        }
        checkData.value = result.disposablesProductList.map(value=>{
            return {
                ...value,
                id:value.baseId,
                isConsume:value.oneOff == 1?true:false,
                infoType:1,
                consumeNum:value.frequency,
                productName:value.baseName,
                pictureUrl:value.basePicture,
                code:value.baseCode
            }
        });
        checkDataMaterials.value = result.disposablesGoodsList.map(value=>{
            return {
                ...value,
                id:value.baseId,
                isConsume:value.oneOff == 1?true:false,
                infoType:2,
                consumeNum:value.frequency,
                goodsName:value.baseName,
                pictureUrl:value.basePicture,
                code:value.baseCode
            }
        });
        materialsList.value = [...checkData.value,...checkDataMaterials.value];

        attrData.value = result.executionList.map(value=>{
            let fieldType = value.fieldType;
            let selectType = "";
            if(value.fieldType == 3){
                fieldType = 3;
                selectType = 1;
            }else if(value.fieldType == 4){
                fieldType = 3;
                selectType = 2;
            }
            return{
                type:fieldType,
                selectType:selectType,
                name:value.fieldName,
                selectValue:value.optionContent?value.optionContent.split(",").map(lis=>{
                    return {
                        value:lis,
                        isDefault:value.defaultValue.indexOf(lis) != -1?true:false,
                    }
                }):[],
                isRequired:value.required == 1?true:false,
                defaultValue:value.fieldType == 4?value.defaultValue.split(",").map((lis,key)=>{
                    return{
                        value:lis,
                        key:lis + '-' + key
                    }
                }):value.defaultValue
            }
        });
        result.projectAttributeList.forEach(info=>{
            projectAttributesList.value.forEach(lis=>{
                if(info.extraAttributesId == lis.id){
                    lis.fieldValue = info.extraAttributesValue
                }
            })
        })

    }catch(e){
        console.log(e);
    }finally{
        pageLoading.value = false;
    }
}


onActivated(async ()=>{
    if(uuid.value !== route.query.id){

        uuid.value = route.query.id;
        await _getBaseSetting();
    }

})



</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName"></TopBar>
        <div class="info-contain" v-loading="pageLoading">
            <div class="btn-opea">
                <el-radio-group v-model="moduleType">
                    <el-radio-button label="基础信息" />
                    <el-radio-button label="商城信息" />
                </el-radio-group>
            </div>
            <div class="info-lis" v-if="moduleType == '基础信息'">

                <el-form :model="form" label-width="90px">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">基础属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="项目编号："  prop="number">
                                {{ form.code || '-' }}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="项目名称：" prop="name">
                                {{ form.projectName || '-' }}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="助记码：" prop="code">
                                {{ form.mnemonicCode || '-' }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="经营品牌：">
                                {{ getBrandName(form.businessBrandId) || '-' }} 
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="服务时长：" >
                                <span v-if="form.serviceTime">{{ form.serviceTime + '分钟'}}  </span>
                                <span v-else>-</span>
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="项目图片：" prop="needValue" >
                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">
                                    <template v-if="form.activityImg.length">
                                        <el-image
                                        :src="item"
                                        :zoom-rate="1.2"
                                        :preview-src-list="[item]"
                                        :initial-index="4"
                                        style="width:160px;height:160px;margin-right:24px"
                                        v-for="(item,index) in form.activityImg"
                                        :key="index"
                                        />
                                    </template>
                                    <el-image
                                        v-else
                                        :src="'https://static.91medicine.net/jiuyang/img/404.png'"
                                        :zoom-rate="1.2"
                                        :preview-src-list="['https://static.91medicine.net/jiuyang/img/404.png']"
                                        style="width:160px;height:160px;margin-right:24px"                                     
                                        />
                                </div>

  
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="销售状态：" prop="status" >
                                {{ ["","正常","停售"][form.salesState] }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="销售分类：" >
                                {{ form.salesClass || '-' }} 
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="零售价：" >
                                {{ form.retailPrice || '-'}}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="成本价：" >
                                {{ form.costPrice || '-' }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="最低售价：" >
                                {{ form.minSellingPrice || '-' }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="耗材信息：">
                                <div style="width:100%;margin-top:8px" v-if="materialsList && materialsList.length>0">
                                    <el-table :data="materialsList" style="width: 100%" stripe>
                                        <el-table-column prop="name" label="产品名称">

                                            <template #default="scoped">
                                                <div class="project-info">
                                                    <div class="img">
                                                        <el-image
                                                        :src="scoped.row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png'"
                                                        :zoom-rate="1.2"
                                                        :preview-src-list="[scoped.row.pictureUrl || 'https://static.91medicine.net/jiuyang/img/404.png']"
                                                        :initial-index="4"
                                                        style="width:100%;height:100%"
                                                        />
                                                    </div>
                                                    <div class="name-info">
                                                        <div class="info-show" >
                                                            <el-tooltip placement="top">
                                                                <template #content>
                                                                    <div class="tips-info">
                                                                        {{ scoped.row.productName || scoped.row.goodsName}}
                                                                    </div>
                                                                </template>
                                                                <span class="tip-show">
                                                                    {{ scoped.row.productName || scoped.row.goodsName}}
                                                                </span>
                                                            </el-tooltip>
                                                        </div>
                                                        <div class="p2">
                                                            <span>{{ scoped.row.code }}</span>
                                
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="type" label="类型">
                                            <template #default="scoped">
                                                {{ ["","产品","物资"][scoped.row.infoType] }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="date" label="单次消耗品">
                                            <template #header>
                                                单次消耗品
                                                <el-tooltip class="item" placement="top">
                                                    <template #content>
                                                        <div  style="width:310px">
                                                            单次消耗品：每做1次项目，就需要消耗1单位或多单位数量的商品。如：一次性毛巾；非单次消耗品：每次做项目时都会用到，一次只消耗部分或能多次使用的商品。如：理疗仪；精油
                                                        </div>
                                                    </template>
                                                    <img src="@/assets/icon/warning-circle.png" alt="" style="width:14px;height:14px;position: relative;left:4px;top:2px;cursor: pointer;">
                                                    
                                                </el-tooltip>
                                            </template>
                                            <template #default="scoped">
                                               <span v-if="scoped.row.isConsume == 1">是</span>
                                               <span v-else>否</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="消耗数量">
                                            <template #default="scoped">
                                                {{ scoped.row.consumeNum }}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="执行信息：">
    
                                <div style="width:100%;margin-top:8px" v-if="attrData && attrData.length>0">
                                    <el-table :data="attrData" style="width: 100%" stripe>
                                        <el-table-column prop="name" label="属性名称">
                                        </el-table-column>
                                        <el-table-column prop="type" label="属性类型">
                                            <template #default="scoped">
                                                <span v-if="scoped.row.type == 1">文本</span>
                                                <span v-if="scoped.row.type == 2">数值</span>
                                                <span v-if="scoped.row.type == 3 && scoped.row.selectType == 1">单选</span>
                                                <span v-if="scoped.row.type == 3 && scoped.row.selectType == 2">多选</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="isRequired" label="是否必填">
                                            <template #default="scoped">
                                                {{ scoped.row.isRequired?'是':'否' }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="defaultValue" label="默认值">
                                            <template #default="{ row }">
                                               

                                                <span v-if="row.type == 3 && row.selectType == 2">
                                                    <span v-if="row.defaultValue.length>0">
                                                        <span v-for="(lis,key) in row.defaultValue" :key="key">
                                                            {{ lis.value }}
                                                            <span v-if="key < row.defaultValue.length-1">、</span>
                                                        </span>
                                                    </span>
                                                    <span v-else>-</span>
                                                </span>
                                                <span v-else>{{ row.defaultValue  || '-'}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="诊疗步骤：" >
                                {{ form.diagnosticStep || '-' }}
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">自定义属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i lis-i-other" v-for="(item,index) in projectAttributesList" :key="index">
                            <div class="l-name">{{ item.fieldName }}</div>
                            <div>
                                {{ item.fieldValue || '-' }}
                            </div>
    
                        </div>
 
                    </div>
                </el-form>
            </div>
            <div class="info-lis" v-if="moduleType == '商城信息'">
                <el-form :model="shopForm" label-width="120px">
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="允许上架商城：" prop="isUpload" >
                                {{ ["","允许上架","不允许上架"][shopForm.mallInfoPut] }}
                            </el-form-item>
                        </div>

                    </div>
                    <div class="is-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="有效期：" >
                                <span v-if="shopForm.mallInfoValidity">{{ shopForm.mallInfoValidity + '天'}}</span>
                                <span v-else>-</span>
                                
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="项目详情：" >
                                {{ shopForm.mallInfoDetails || '-' }}
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item" v-if="shopForm.projectPictureList.length>0">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="" >
                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">
                                    <el-image
                                    :src="item"
                                    :zoom-rate="1.2"
                                    :preview-src-list="[item]"
                                    :initial-index="4"
                                    style="width:160px;height:160px;margin-right:24px"
                                    v-for="(item,index) in shopForm.projectPictureList"
                                    :key="index"
                                    />

                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="购买须知：">
                                <span>{{ shopForm.purchaseNotes || '-' }}</span>
                            </el-form-item>
                        </div>

                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
:deep(.el-table__inner-wrapper::before){
    display:none;
}
:deep(.el-table th.el-table__cell){
    background: #EBEBEB;
}
:deep(.el-dialog__body){
    padding:0 4px;
}
:deep(.el-table__header){
    tr{
        th{
            &:last-child{
                .cell{
                    border-right: 0px;
                }
            }
        }
    }
}
.page-contain{
    width: 100%;
    height: 100%;
    :deep(.el-table th > .cell){
        border-right: 0;;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding:16px 24px;
        .btn-opea{
            width: 100%;
            height: 32px;
        }
        .info-lis{
            width: 100%;
            height: calc(100% - 32px);
            box-sizing:border-box;
            padding-top:24px;
            overflow:auto;
            .lis-head{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom:16px;
                    .icon-view{
                        margin-right: 8px;
                        position: relative;
                        width: 14px;
                        height: 14px;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #10E7F9; 
                        }
                        .icon-view-on{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #3480FF; /* 背景色 */
                        }
                    }
                    .label-name{
                        color: #000000;
                        font-weight: bold;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    img{
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }
                }
        }
        .lis-item{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .lis-i{
                width: calc(100% / 3);
                margin-bottom:10px;
            }
            .lis-i-other{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .l-name{
                    width: 80px;
                    text-align: right;
                    word-break: break-all;
                    word-wrap: break-word;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    min-height: 32px;
                    padding: 0 12px 0 0;
                    font-size: var(--el-form-label-font-size);
                    color: var(--el-text-color-regular);
                    line-height: 20px;
                }
                
            }
        }
    }
    :deep(.el-table__row){
        .el-input .el-input__wrapper{
            background: rgba(0,0,0,0);
        }
    }
}
.input-line{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:16px;
    &:last-child{
        margin-bottom:0px;
    }
    img{
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left:8px;
    }
}
.tips-info{
    max-width: 300px; 
}
.info-show{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tip-show{
        max-width: 100%;
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        overflow: hidden;
        font-weight: bold;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .text-show{
        max-width: calc(100% - 14px);
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .img{
        width: 14px;
        height: 14px;
        cursor: pointer;

    }
}
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .img{
        width: 48px;
        height: 48px;
        

    }
    .name-info{
        width:calc(100% - 56px);
        box-sizing: border-box;
        padding-left:8px;
        .p1{
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;

        }
        .p2{
            width: 100%;
            margin-top:8px;
            color: #666666;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
    }
}
</style>